<template >
        <section class="chart-container">
            <el-row>
                <div class="chart-direction">
                    <span >今日系统安全管理指数</span>
                    <!-- 只读 -->
                    <el-rate v-model="value1" 
                            disabled 
                            show-text 
                            text-color="#ff9900"
                            text-template="{value}" class="el-rate">
                    </el-rate>
                </div>
                <div class="show-section">
                    <chart></chart>
                </div>
            </el-row>
        </section>
</template>
<script>
    import chart from './Charts.vue'
    export default{
        data(){
            return {
                value1:3.8
            }
        },
        methods:{
        },
        components:{
            chart
        }
    }

</script>
<style lang="" scoped>
        .chart-container{
            padding: 0 10px;
        }
            .chart-direction{
                background-color: white;
                font-size: 18px;
                font-weight: bolder;
                padding: 10px;
                }
            .el-rate{
                display: inline-block;
            }
            .el-rate span{
                    font-size: 28px;
                }
            .chart-direction span{
                    padding: 10px;
            }
            .show-section{
                background: white;
                margin-top: 20px;
            }

</style>